<template>
  <div>
    <t-head-menu v-model="menu1Value" style="position: fixed; top: 0; z-index: 9" theme="light" @change="changeHandler">
      <template #logo>
        <img class="logo" height="44" style="margin: 0" src="../assets/logo.png" alt="logo" />
        <span class="site" style="margin: 0; font-size: 24px">数字奇境</span>
      </template>
      <t-menu-item value="home" @click="router.push('/home')">首页</t-menu-item>
      <t-menu-item value="live" @click="router.push('/live')">直播</t-menu-item>
      <t-menu-item value="map" @click="router.push('/map')">地图</t-menu-item>
      <template #operations>
        <t-space :size="20">
          <NotificationIcon style="cursor: pointer" size="20" @click="router.push(`/notice/${userId}`)" />
          <t-dropdown placement="bottom" trigger="hover">
            <img v-if="userInfo.avatar" class="box-my-top-avatar" :src="userInfo.avatar" alt="" />
            <img v-else class="box-my-top-avatar" src="@/assets/datou.jpg" alt="" />
            <t-dropdown-menu>
              <t-dropdown-item style="color: #0052d9" value="1" @click="router.push(`/user/${userId}`)">
                <UserIcon /> 个人中心
              </t-dropdown-item>
              <t-dropdown-item
                style="color: red"
                :value="2"
                @click="
                  logout();
                  router.push('/login');
                "
              >
                <LogoutIcon /> 退出登录
              </t-dropdown-item>
            </t-dropdown-menu>
          </t-dropdown>
        </t-space>
      </template>
    </t-head-menu>
  </div>
</template>

<script lang="ts" setup>
import { LogoutIcon, NotificationIcon, UserIcon } from 'tdesign-icons-vue-next';
import { HeadMenuProps } from 'tdesign-vue-next';
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';

import { logoutApi } from '@/api/auth';
import { getUserByIdApi } from '@/api/user';

onMounted(() => {
  imgUrl.value = localStorage.getItem('imgUrl');
  getUserById();
});

const userId = localStorage.getItem('id');
const imgUrl = ref<String>();
const router = useRouter();
const menu1Value = ref('home');
const userInfo = ref({
  id: localStorage.getItem('id'),
  avatar: '',
});

const changeHandler: HeadMenuProps['onChange'] = (active) => {
  console.log('change', active);
};

// 退出登录
const logout = async () => {
  await logoutApi();
  localStorage.removeItem('token');
  localStorage.removeItem('id');
  localStorage.removeItem('imgUrl');
};

// 根据用户id查询用户信息
const getUserById = async () => {
  const res = await getUserByIdApi(userInfo.value.id);
  userInfo.value.avatar = res.data.avatar;
};
</script>

<style lang="less" scoped>
.t-menu__operations {
  .t-button {
    margin-left: 8px;
  }
}

:deep(.t-space-item) {
  display: flex;
  align-items: center;
}

img {
  height: 32px;
  width: 32px;
  border-radius: 50%;
  margin-right: 20px;
  cursor: pointer;
}

@media screen and (width <= 767px) {
  .site {
    display: none !important;
  }

  .logo {
    margin: 0 !important;
  }

  :deep(.t-menu__item) {
    padding: 0 4px;
  }

  :deep(.t-input__wrap) {
    display: none !important;
  }
}
</style>
